#Task 1

Hint One - Random Order no Indetention

}

document.querySelector("#t1-b1").onclick = function(){

document.querySelector("#t1-b2").onclick = function(){

}

document.querySelector("#t1-color-text").style.color = "teal";

document.querySelector("#t1-b3").onclick = function(){

document.querySelector("#t1-color-text").style.color = "white";

document.querySelector("#t1-color-text").style.color = "purple";

Hint Two - Random Order including Indetention

}

document.querySelector("#t1-b1").onclick = function(){

document.querySelector("#t1-b2").onclick = function(){

}

document.querySelector("#t1-color-text").style.color = "teal";

document.querySelector("#t1-b3").onclick = function(){

document.querySelector("#t1-color-text").style.color = "white";

document.querySelector("#t1-color-text").style.color = "purple";

Answer

1	document.querySelector("#t1-b1").onclick = function(){
2	document.querySelector("#t1-color-text").style.color = "purple";
3	}
4	document.querySelector("#t1-b2").onclick = function(){
5	document.querySelector("#t1-color-text").style.color = "teal";
6	}
7	document.querySelector("#t1-b3").onclick = function(){
8	document.querySelector("#t1-color-text").style.color = "white";
9	}

All Questions

Hint 1

Hint 2

See Answer

#Task 2

Hint One - Random Order no Indetention

document.querySelector("#task2 .font-size-2").onclick = function(){

}

document.querySelector("#task2 .font-size-1").onclick = function(){

}

document.querySelector("#task2 .font-size-3").onclick = function(){

document.querySelector("#t2-text").style.fontSize = "25px";

document.querySelector("#t2-text").style.fontSize = "20px";

document.querySelector("#t2-text").style.fontSize = "15px";

Hint Two - Random Order including Indetention

document.querySelector("#task2 .font-size-2").onclick = function(){

}

document.querySelector("#task2 .font-size-1").onclick = function(){

}

document.querySelector("#task2 .font-size-3").onclick = function(){

document.querySelector("#t2-text").style.fontSize = "25px";

document.querySelector("#t2-text").style.fontSize = "20px";

document.querySelector("#t2-text").style.fontSize = "15px";

Answer

1	document.querySelector("#task2 .font-size-1").onclick = function(){
2	document.querySelector("#t2-text").style.fontSize = "15px";
3	}
4	document.querySelector("#task2 .font-size-2").onclick = function(){
5	document.querySelector("#t2-text").style.fontSize = "20px";
6	}
7	document.querySelector("#task2 .font-size-3").onclick = function(){
8	document.querySelector("#t2-text").style.fontSize = "25px";
9	}

All Questions

Hint 1

Hint 2

See Answer

#Task 3

Hint One - Random Order no Indetention

document.querySelector("#task3 .width-2").onclick = function(){

}

document.querySelector("#task3 .width-3").onclick = function(){

document.querySelector("#task3 img").style.width = "100px";

document.querySelector("#task3 .width-1").onclick = function(){

document.querySelector("#task3 img").style.width = "200px";

document.querySelector("#task3 img").style.width = "300px";

Hint Two - Random Order including Indetention

document.querySelector("#task3 .width-2").onclick = function(){

}

document.querySelector("#task3 .width-3").onclick = function(){

document.querySelector("#task3 img").style.width = "100px";

document.querySelector("#task3 .width-1").onclick = function(){

document.querySelector("#task3 img").style.width = "200px";

document.querySelector("#task3 img").style.width = "300px";

Answer

1	document.querySelector("#task3 .width-1").onclick = function(){
2	document.querySelector("#task3 img").style.width = "100px";
3	}
4	document.querySelector("#task3 .width-2").onclick = function(){
5	document.querySelector("#task3 img").style.width = "200px";
6	}
7	document.querySelector("#task3 .width-3").onclick = function(){
8	document.querySelector("#task3 img").style.width = "300px";
9	}

All Questions

Hint 1

Hint 2

See Answer

#Task 4

Hint One - Random Order no Indetention

document.querySelector("#task4 .font-size-3").onclick = function(){

}

document.querySelector("#task4 .font-size-1").onclick = function(){

elements[i].style.fontSize = "30px";

}

document.querySelector("#task4 .font-size-2").onclick = function(){

elements = document.querySelectorAll("#task4 .text")

}

elements[i].style.fontSize = "40px";

for (let i = 0; i < elements.length; i++) {

}

elements[i].style.fontSize = "20px";

for (let i = 0; i < elements.length; i++) {

Hint Two - Random Order including Indetention

document.querySelector("#task4 .font-size-3").onclick = function(){

}

document.querySelector("#task4 .font-size-1").onclick = function(){

elements[i].style.fontSize = "30px";

}

document.querySelector("#task4 .font-size-2").onclick = function(){

elements = document.querySelectorAll("#task4 .text")

}

elements[i].style.fontSize = "40px";

for (let i = 0; i < elements.length; i++) {

}

elements[i].style.fontSize = "20px";

for (let i = 0; i < elements.length; i++) {

Answer

1	elements = document.querySelectorAll("#task4 .text")
2	document.querySelector("#task4 .font-size-1").onclick = function(){
3	for (let i = 0; i < elements.length; i++) {
4	elements[i].style.fontSize = "20px";
5	}
6	}
7
8	document.querySelector("#task4 .font-size-2").onclick = function(){
9	for (let i = 0; i < elements.length; i++) {
10	elements[i].style.fontSize = "30px";
11	}
12	}
13
14	document.querySelector("#task4 .font-size-3").onclick = function(){
15	for (let i = 0; i < elements.length; i++) {
16	elements[i].style.fontSize = "40px";
17	}
18	}

All Questions

Hint 1

Hint 2

See Answer

#Task 5

Hint One - Random Order no Indetention

}

document.querySelector("#task5 .width-1").onclick = function(){

for (let i = 0; i < elements.length; i++) {

document.querySelector("#task5 .width-3").onclick = function(){

for (let i = 0; i < elements.length; i++) {

}

elements[i].style.width = "10px";

elements[i].style.width = "50px";

for (let i = 0; i < elements.length; i++) {

elements[i].style.width = "30px";

elements = document.querySelectorAll("#task5 .box")

}

document.querySelector("#task5 .width-2").onclick = function(){

}

Hint Two - Random Order including Indetention

}

document.querySelector("#task5 .width-1").onclick = function(){

for (let i = 0; i < elements.length; i++) {

document.querySelector("#task5 .width-3").onclick = function(){

for (let i = 0; i < elements.length; i++) {

}

elements[i].style.width = "10px";

elements[i].style.width = "50px";

for (let i = 0; i < elements.length; i++) {

elements[i].style.width = "30px";

elements = document.querySelectorAll("#task5 .box")

}

document.querySelector("#task5 .width-2").onclick = function(){

}

Answer

1	elements = document.querySelectorAll("#task5 .box")
2	document.querySelector("#task5 .width-1").onclick = function(){
3	for (let i = 0; i < elements.length; i++) {
4	elements[i].style.width = "10px";
5	}
6	}
7	document.querySelector("#task5 .width-2").onclick = function(){
8	for (let i = 0; i < elements.length; i++) {
9	elements[i].style.width = "30px";
10	}
11	}
12	document.querySelector("#task5 .width-3").onclick = function(){
13	for (let i = 0; i < elements.length; i++) {
14	elements[i].style.width = "50px";
15	}
16	}

All Questions

Hint 1

Hint 2

See Answer

#Task 6

Hint One - Random Order no Indetention

elements = document.querySelectorAll("#task6 .box");

}

elements[i].style.backgroundColor = getRandomColor();

for (let i = 0; i < elements.length; i++) {

document.querySelector("#task6 .button").onclick = function(){

Hint Two - Random Order including Indetention

elements = document.querySelectorAll("#task6 .box");

}

elements[i].style.backgroundColor = getRandomColor();

for (let i = 0; i < elements.length; i++) {

document.querySelector("#task6 .button").onclick = function(){

Answer

1	document.querySelector("#task6 .button").onclick = function(){
2	elements = document.querySelectorAll("#task6 .box");
3	for (let i = 0; i < elements.length; i++) {
4	elements[i].style.backgroundColor = getRandomColor();
5	}
6	}

All Questions

Hint 1

Hint 2

See Answer

#Task 7

Hint One - Random Order no Indetention

document.querySelector("#task7 .button").onclick = function(){

arr = ["blue","red","green"]

}

idx = 0;

document.querySelector("#task7 h3").style.color = arr[idx];

}

if(idx == 3){

idx += 1

idx = -1

Hint Two - Random Order including Indetention

document.querySelector("#task7 .button").onclick = function(){

arr = ["blue","red","green"]

}

idx = 0;

document.querySelector("#task7 h3").style.color = arr[idx];

}

if(idx == 3){

idx += 1

idx = -1

Answer

1	arr = ["blue","red","green"]
2	idx = -1
3	document.querySelector("#task7 .button").onclick = function(){
4	idx += 1
5	if(idx == 3){
6	idx = 0;
7	}
8	document.querySelector("#task7 h3").style.color = arr[idx];
9	}

All Questions

Hint 1

Hint 2

See Answer

#Task 8

Hint One - Random Order no Indetention

document.querySelector("#task8 .button").onclick = function(){

document.querySelector("#task8 h3").innerHTML = "Click Count: " + count;

count = 0;

}

count += 1;

Hint Two - Random Order including Indetention

document.querySelector("#task8 .button").onclick = function(){

document.querySelector("#task8 h3").innerHTML = "Click Count: " + count;

count = 0;

}

count += 1;

Answer

1	count = 0;
2	document.querySelector("#task8 .button").onclick = function(){
3	count += 1;
4	document.querySelector("#task8 h3").innerHTML = "Click Count: " + count;
5	}

All Questions

Hint 1

Hint 2

See Answer

#Task 9

Hint One - Random Order no Indetention

document.querySelector("#task9 .button").onclick = function(){

text += "<div class='box'></div>";

document.querySelector("#task9 .box-container").innerHTML = text;

}

text = document.querySelector("#task9 .box-container").innerHTML;

Hint Two - Random Order including Indetention

document.querySelector("#task9 .button").onclick = function(){

text += "<div class='box'></div>";

document.querySelector("#task9 .box-container").innerHTML = text;

}

text = document.querySelector("#task9 .box-container").innerHTML;

Answer

1	document.querySelector("#task9 .button").onclick = function(){
2	text = document.querySelector("#task9 .box-container").innerHTML;
3	text += "<div class='box'></div>";
4	document.querySelector("#task9 .box-container").innerHTML = text;
5	}

All Questions

Hint 1

Hint 2

See Answer

#Task 10

Hint One - Random Order no Indetention

},1000);

setTimeout(function(){

document.querySelector("#task10 .button").onclick = function(){

}

document.querySelector("#task10 .box").style.backgroundColor = "red";

Hint Two - Random Order including Indetention

},1000);

setTimeout(function(){

document.querySelector("#task10 .button").onclick = function(){

}

document.querySelector("#task10 .box").style.backgroundColor = "red";

Answer

1	document.querySelector("#task10 .button").onclick = function(){
2	setTimeout(function(){
3	document.querySelector("#task10 .box").style.backgroundColor = "red";
4	},1000);
5	}

All Questions

Hint 1

Hint 2

See Answer

#Task 11

Hint One - Random Order no Indetention

setTimeout(function(){

},200 * (i+1));

elements = document.querySelectorAll("#task11 .box");

document.querySelector("#task11 .button").onclick = function(){

for (let i = 0; i < elements.length; i++) {

}

elements[i].style.backgroundColor = "yellow";

}

Hint Two - Random Order including Indetention

setTimeout(function(){

},200 * (i+1));

elements = document.querySelectorAll("#task11 .box");

document.querySelector("#task11 .button").onclick = function(){

for (let i = 0; i < elements.length; i++) {

}

elements[i].style.backgroundColor = "yellow";

}

Answer

1	document.querySelector("#task11 .button").onclick = function(){
2	elements = document.querySelectorAll("#task11 .box");
3	for (let i = 0; i < elements.length; i++) {
4	setTimeout(function(){
5	elements[i].style.backgroundColor = "yellow";
6	},200 * (i+1));
7	}
8
9	}

All Questions

Hint 1

Hint 2

See Answer

#Task 12

Hint One - Random Order no Indetention

changeColour(this,["red","orange","green"],0);

document.querySelector("#task12 .button").onclick = function(){

},500);

element.style.backgroundColor = arr[idx];

setTimeout(function(){

}

idx = (idx+1) % arr.length;

function changeColour(element,arr,idx){

changeColour(element,arr,idx);

Hint Two - Random Order including Indetention

changeColour(this,["red","orange","green"],0);

document.querySelector("#task12 .button").onclick = function(){

},500);

element.style.backgroundColor = arr[idx];

setTimeout(function(){

}

idx = (idx+1) % arr.length;

function changeColour(element,arr,idx){

changeColour(element,arr,idx);

Answer

1	function changeColour(element,arr,idx){
2	element.style.backgroundColor = arr[idx];
3	setTimeout(function(){
4	idx = (idx+1) % arr.length;
5	changeColour(element,arr,idx);
6	},500);
7	}
8	document.querySelector("#task12 .button").onclick = function(){
9	changeColour(this,["red","orange","green"],0);
10	}

All Questions

Hint 1

Hint 2

See Answer

#Task 13

Hint One - Random Order no Indetention

buttons[i].onclick = function(){

document.querySelector("#task13 h3").style.color = backgroundColor;

bg = window.getComputedStyle(this).style.backgroundColor;

for (let i = 0; i < buttons.length; i++) {

}

buttons = document.querySelectorAll("#task13 .button")

}

Hint Two - Random Order including Indetention

buttons[i].onclick = function(){

document.querySelector("#task13 h3").style.color = backgroundColor;

bg = window.getComputedStyle(this).style.backgroundColor;

for (let i = 0; i < buttons.length; i++) {

}

buttons = document.querySelectorAll("#task13 .button")

}

Answer

1	buttons = document.querySelectorAll("#task13 .button")
2	for (let i = 0; i < buttons.length; i++) {
3	buttons[i].onclick = function(){
4	bg = window.getComputedStyle(this).style.backgroundColor;
5	document.querySelector("#task13 h3").style.color = backgroundColor;
6	}
7	}

All Questions

Hint 1

Hint 2

See Answer

#Task 14

Hint One - Random Order no Indetention

size = parseFloat(size)

}

document.querySelector("#task14 .font-size-1").onclick = function(){modifyText(-3)}

element = document.querySelector("#task14 h3")

element.style.fontSize = size + "px";

size = window.getComputedStyle(element).getPropertyValue("font-size")

document.querySelector("#task14 .font-size-2").onclick = function(){modifyText(3)}

size += num

function modifyText(num){

Hint Two - Random Order including Indetention

size = parseFloat(size)

}

document.querySelector("#task14 .font-size-1").onclick = function(){modifyText(-3)}

element = document.querySelector("#task14 h3")

element.style.fontSize = size + "px";

size = window.getComputedStyle(element).getPropertyValue("font-size")

document.querySelector("#task14 .font-size-2").onclick = function(){modifyText(3)}

size += num

function modifyText(num){

Answer

1	function modifyText(num){
2	element = document.querySelector("#task14 h3")
3	size = window.getComputedStyle(element).getPropertyValue("font-size")
4	size = parseFloat(size)
5	size += num
6	element.style.fontSize = size + "px";
7	}
8	document.querySelector("#task14 .font-size-1").onclick = function(){modifyText(-3)}
9	document.querySelector("#task14 .font-size-2").onclick = function(){modifyText(3)}

All Questions

Hint 1

Hint 2

See Answer

< Home

All Questions

#Task 1

Hint One - Random Order no Indetention

Hint Two - Random Order including Indetention

Answer

#Task 2

Hint One - Random Order no Indetention

Hint Two - Random Order including Indetention

Answer

#Task 3

Hint One - Random Order no Indetention

Hint Two - Random Order including Indetention

Answer

#Task 4

Hint One - Random Order no Indetention

Hint Two - Random Order including Indetention

Answer

#Task 5

Hint One - Random Order no Indetention

Hint Two - Random Order including Indetention

Answer

#Task 6

Hint One - Random Order no Indetention

Hint Two - Random Order including Indetention

Answer

#Task 7

Hint One - Random Order no Indetention

Hint Two - Random Order including Indetention

Answer

#Task 8

Hint One - Random Order no Indetention

Hint Two - Random Order including Indetention

Answer

#Task 9

Hint One - Random Order no Indetention

Hint Two - Random Order including Indetention

Answer

#Task 10

Hint One - Random Order no Indetention

Hint Two - Random Order including Indetention

Answer

#Task 11

Hint One - Random Order no Indetention

Hint Two - Random Order including Indetention

Answer

#Task 12

Hint One - Random Order no Indetention

Hint Two - Random Order including Indetention

Answer

#Task 13

Hint One - Random Order no Indetention

Hint Two - Random Order including Indetention

Answer

#Task 14

Hint One - Random Order no Indetention

Hint Two - Random Order including Indetention

Answer

Copied!